<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/login.css"/>
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<style type="text/css">
			#main #main-center #main-center-right #main-center-right-bottom form label{
				width: 20%;
			}
			#main #main-center #main-center-right #main-center-right-bottom form input{
				width: 69%;
			}
			#main #main-center #main-center-right #main-center-right-bottom form #main-center-right-bottom-yz input{
				width: 24%;
			}
			#main #main-center #main-center-right #main-center-right-bottom form #main-center-right-bottom-dl a{
				float:none;
			}
			#main #main-center #main-center-right #main-center-right-bottom form button{
				background-color: #f99e1e;
				border: 1px solid #f79307;
			}
			#main #main-center #main-center-right #main-center-right-bottom form button:hover{
				background-color: #de8406;
				border-color: #bb7005;
			}
			#arror{
				width: 191px;
				padding: 9px 14px;
				position: relative;
				border: 1px solid #EFEFEF;
				top: -303px;
				right: -406px;
				z-index: 500;
				text-align: center;
				border-radius: 5px;
				background-color: white;
				display: none;
			}
			#arror #arror-left{
				position: absolute;
				left: -10px;
				top: 7px;
				width: 0;
				height: 0;
				border: 10px solid transparent;
				content: " ";
				border-right-color: #EFEFEF;
				border-left-width: 0;
			}
			#arror #arror-left-top{
				position: absolute;
				left: -9px;
				top: 7.9px;
				width: 0;
				height: 0;
				border: 9px solid transparent;
				content: " ";
				border-right-color: white;
				border-left-width: 0;
			}
		</style>
	</head>
	<body>
<!-- 头部 -->
	<header></header>
<!-- 右侧边栏 -->
	<aside></aside>
<!-- 中间部分 -->
<div id="main">
	<div id="main-center">
		<div id="main-center-right">
			<div id="main-center-right-top">
				注册成为会员
				<a href="login.html">立即登录»</a>
			</div>
			<div id="main-center-right-bottom">
				<form action="" method="post">
					<label class="deng">登录账号<span>*</span></label>
					<input type="text" name="" id="username" value="" placeholder="手机号/邮箱/用户名" required="true" class="deng"/><br>
					<label>登录密码<span>*</span></label>
					<input type="text" name="" id="userpass" value="" placeholder="登录密码" required="true"/><br>
					<label>确认密码<span>*</span></label>
					<input type="text" name="" id="" value="" placeholder="再次输入登录密码" required="true" class="userpass"/><br>
					<div id="main-center-right-bottom-yz">
<!-- 						<label>验证码<span>*</span></label>
						<input type="text" name="" id="" value="" placeholder="验证码" required="true"/>
						<img src="./vcode-index-passport.jpg" >
						<button type="button">更换验证码</button> -->
					</div>
					<div id="main-center-right-bottom-dl">
						<input type="checkbox" name="" id="" value="" checked=""/>同意
						<a href="">《会员注册条例》</a>
					</div>
					<button type="button" id="tijiao">提交</button>
				</form>
				
				<div id="arror">
					<div id="arror-left">
						
					</div>
					<div id="arror-left-top">
						
					</div>
					<div id="arror-left-center">
						该手机号已被注册，请更换一个
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- 底部 -->
	<footer></footer>
	</body>
</html>
<script src="./js/jQuery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$("header").load("head.html");
	$("footer").load("footer.html");
	// 右引入侧边栏
	$("aside").load("sidebar.html");
	//所有前端验证
	function isTest(){
		return isUserName()&&isPass();
	}
//用户名的前端验证
	function isUserName(){
		//非空判断
		if($("#username").val()==""){
			return false;
		}
		//格式判断
		let regMobile = /^(0|86|17951)?(13[0-9]|15[0123456789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
		let regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
		if(!regMobile.test($("#username").val()) || !regMobile.test($("#username").val())){
			return false;
			
		}
			return true;
		
	}
// 密码的前端验证
	function isPass(){
		// 非空判断
		if($("#userpass").val()==""){
			return false;
		}
		// 格式判断
		let reg= /^\d{6,16}$/;
		if(!reg.test($("#userpass").val())){
			return false;
		}else{
			return true;
		}
	}
// 后端用户验证
	// 后端验证用户是否存在
	let hasUser = false; //该用户名不存在
	$("#username").blur(function(){
		// 前端验证
		if(isUserName()==false){
			$("#arror").css({
				display:"block"
			})
				$("#arror-left-center").html("用户名格式错误");
		}else{
			//后端验证
			$.ajax({
				url:"./php/checkUser.php",
				type:"get",
				data:{
					"username":$("#username").val(),
				},
				success:function(resText){
					if(resText=="0"){
						$("#arror-left-center").html("用户名已存在")
						$("#arror").css({
							display:"block"
						})
						$(".deng").css({
							color:"#a94442",
							borderColor:"#a94442"
						})
						hasUser = true;
					}else if(resText=='1'){
						console.log("用户名不存在");
						hasUser = false;
						$(".deng").css({
							color:"#3c763d",
							borderColor:"#3c763d"
						})
					}
				}
			});
		}
	});
	// 再次获得焦点隐藏
	$("#username").focus(function(){
		$("#arror").css({
			display:"none"
		})
	})
// 前端密码格式验证
	$("#userpass").blur(function(){
		if(isPass()==false){
			alert("用户名密码格式错误")
		}
	})
	$("#tijiao").click(function(){
		if($("#userpass").val()==$(".userpass").val() && isTest()){
			$.post({
				url:"./php/addUser.php",
				type:"post",
				data:{
					"username": $("#username").val(),
					"userpass":$("#userpass").val(),
				},
				success:function(resText){
					console.log(resText);
					if(resText=="success"){
						alert("注册成功");
						window.location.href="index.html";
					}else{
						alert("注册失败");
					}
				}
			})
		}else{
			alert("两次密码输入错误,请重新输入");
		}
	})
</script>